<template>
	<view class="GrounpTrue">
		<view class="header">
			<view></view>
			<view>预约信息</view>
		</view>
		<view class="myTable">
			<uni-table border stripe emptyText="暂无更多数据" v-for="(v,i) in Grounpmake" :key='i'>
				<uni-tr>
					<uni-td align="right">课程:</uni-td>
					<uni-td>{{v.courseName}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right"> 日期:</uni-td>
					<uni-td>{{v.dateYMD}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">时间:</uni-td>
					<uni-td>{{v.classTime}}-{{v.classOverTime}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">场馆:</uni-td>
					<uni-td>{{v.venuesName}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">场地:</uni-td>
					<uni-td>{{v.venuesAddress}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">成团人数:</uni-td>
					<uni-td>{{v.courseMaxnum}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">教练:</uni-td>
					<uni-td>{{v.coachName}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">
						<text>*</text>
						预约人数:
					</uni-td>
					<uni-td>
						<uni-number-box v-model="numVal" @change="numValue"></uni-number-box>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="beizhu">
				<textarea @blur="mytext" :value="couserText" placeholder="填写预约备注,该信息会被教练看到" />
			</view>
		</view>
		<view class="header">
			<view></view>
			<view>选择支付方式</view>
		</view>
		<view class="pay">
			<radio-group name="" @change="wx">
				<label>
					<radio value="wx" />
					<view>
						<text class="iconfont icon-weixin"></text>
						<text>微信支付</text>
					</view>
				</label>
				<label>
					<radio value="card" />
					<view>
						<text class="iconfont icon-yinhangqia"></text>
						<text>会员卡</text>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="header">
			<view></view>
			<view>温馨提示</view>
		</view>
		<view class="prompt">
			<view>• 预约成后自动扣除相应的费用。</view>
			<view>• 取消预约不扣除费用。</view>
		</view>
	</view>
	<view class="footer">
		<view>
			<view>
				<view class="iconfont icon-dianhua"></view>
				<view>联系教练</view>
			</view>
		</view>

		<view>
			<button type="default" @click="promptTrue()">
				提交预约并支付
			</button>
		</view>
	</view>
</template>

<script>
	import store from '../../../store/index.js'
	import myRequest from '../../../utils/myRequest.js'
	import {
		reactive,
		toRefs,
		onMounted,
	} from 'vue'
	export default {
		setup() {
			const data = reactive({
				Grounpmake: [],
				numVal: 0,
				couserText: '',
				c: '',
				myid: '',
				val: '',
				beizhu: '',
				count: '',
				//预约人数
				numValue(val) {
					data.val = val
				},
				//单选
				wx(a) {
					data.c = a.detail.value
				},
				//提交
				promptTrue() {
					uni.showModal({
						content: '确认要预约该课程？',
						success: function(res) {
							if (res.confirm) {
								data.addMake()
							} else if (res.cancel) {
								uni.showToast({
									title: '取消预约成功',
									duration: 2000,
								});
							}
						}
					})

				},
				//获取备注的值
				mytext(e) {
					data.beizhu = e.detail.value
				},
				addMake() {
					console.log( data.Grounpmake[0].courseImg)
					myRequest({
						url: '/addMakeGroup',
						method: 'post',
						data: {
							makeGroupName: data.Grounpmake[0].courseName,
							makeCoachName: data.Grounpmake[0].coachName,
							makeGroupTime: data.Grounpmake[0].classTime.concat("-" + data.Grounpmake[0]
								.classOverTime),
							makeGroupTab: data.Grounpmake[0].classintro,
							makeGroupImage: data.Grounpmake[0].courseImg,
							makeGroupDate: data.Grounpmake[0].dateYMD,
							makeGroupText: data.beizhu,
							makeGroupMaxNum: data.val,
							makeGroupPayment: data.c,
							useId: data.count
						}
					}).then((res) => {
						if (res.data.code == 200) {
							uni.navigateTo({
								url: "prompTrue?c=" + data.c
							})
							uni.showToast({
								title: '预约成功',
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: '预约失败',
								duration: 2000,
								icon: error,
							});
						}
					})
				},
				//获取课程数据
				getData() {
					data.Grounpmake.push(store.state.Group.GroupArr)
				},
				getUserId() {
					data.count = store.state.userdata[0].vipId
				}
			})
			//钩子
			onMounted(() => {
				data.getUserId()
				data.getData()
			})
			return {
				...toRefs(data)
			}
		}

	}
</script>

<style>
	@import url('~@/static/font-li/font2022/iconfont.css');

	.GrounpTrue {
		margin-bottom: 150rpx;
	}

	.header {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #8F939C;
		height: 130rpx;
		padding: 0 20rpx;
	}

	.header>view:first-child {
		height: 40rpx;
		width: 8rpx;
		background: #6666FF;
		margin-right: 15rpx;
	}

	.header>view:last-child {
		font-weight: bold;
		font-size: 35rpx;
	}

	.myTable {
		padding: 20rpx;
	}

	.myTable text {
		color: red;
	}

	.beizhu {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.beizhu>textarea {
		width: 600rpx;
		height: 120rpx;
		border: 1rpx #8F939C solid;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.pay label {
		display: flex;
		height: 100rpx;
		border-bottom: 1rpx solid #8F939C;
		align-items: center;
		padding: 0 20rpx;
	}

	.prompt {
		padding: 0 20rpx;
	}

	.prompt>view {
		margin-top: 10rpx;
		font-size: 30rpx;
	}

	.footer {
		display: flex;
		border: 1rpx solid #D8D8D8;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		width: 750rpx;
		height: 130rpx;
	}

	.footer>view {
		flex: 1;
	}

	.footer>view:first-child {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #A5A4A4;

	}

	.footer>view:first-child>view>view:first-child {
		text-align: center;
		font-size: 35rpx;
		margin-bottom: 10rpx;
	}

	.footer>view:last-child button {
		width: 100%;
		height: 100%;
		line-height: 130rpx;
		background: #007AFF;
		color: #FFFFFF;
	}
</style>
